<template>
  <div class="staff-detail pt116" id="Base">
    <!-- <div class="staff-detail__bgBanner"></div> -->
    <div class="staff-detail__warp">
      <div class="padding-tb-15">
        <Breadcrumb separator="">
          <BreadcrumbItem>当前位置</BreadcrumbItem>
          <BreadSeparator>:</BreadSeparator>
          <BreadcrumbItem><a href="/service">数据服务</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem><a href="/staffList">人员数据</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem>人员详情</BreadcrumbItem>
        </Breadcrumb>
      </div>
      <div class="staff-detail__header">
        <div class="staff-name-content">
          <span>{{ sliceEl(detail?.personName) }}</span>
          <div class="staff-box" >
            <div class="staff-type flex">
              <h3>{{ detail?.personName }}</h3>
              <ul class="certificate">
                <li v-for="(item, index) in detail?.qualTypeList" :key="index">
                  {{ item }}
                </li>
              </ul>
            </div>
            <p><span>当前在聘单位 : </span>{{ detail?.corpName }}</p>
          </div>
          <div class="refresh">
            <h3><span>人员数据入库时间：</span>{{ parseTime(detail?.creationTime) }}</h3>
            <h4><i></i> 最近更新时间：{{ parseTime(detail?.lastUpdate,'{y}-{m}-{d} {h}:{i}:{s}') }}</h4>
          </div>
        </div>

        <div class="staff-info">
          <p class="car-no"><span>身份证号 :</span>{{ detail?.cardNo }}</p>
          <p><span>最高学历 :</span>{{ detail?.eduEducation }}</p>
          <p><span>所学专业 :</span>{{ detail?.eduMajor }}</p>
          <p><span>毕业院校 :</span>{{ detail?.eduSchool }}</p>
        </div>

        <ul class="staff-num-list">
          <li>
            <i class="ic1"></i>
            <span>{{ count?.qualCount }}</span>
            <p>个人证书数</p>
          </li>
          <li>
            <i class="ic2"></i>
            <span>{{ count?.projectCount }}</span>
            <p>参建项目(建设云数据)</p>
          </li>
          <li>
            <i class="ic3"></i>
            <span>{{ count?.historyCount }}</span>
            <p>参建项目(补录数据）</p>
          </li>
          <li>
            <i class="ic4"></i>
            <span>{{ count?.year===null?'--':count?.year }}</span>
            <p>从业年数</p>
          </li>
          <li>
            <i class="ic5"></i>
            <span>{{ count?.limitCount }}</span>
            <p>当前行为限制</p>
          </li>
        </ul>
      </div>


      <div class="staff-detail__content">
        <Tabs type="card" v-model:activeKey="activeKey">
          <TabPane key="1" tab="证书信息">
            <div class="staff-tab__content">
              <certificate />
            </div>
          </TabPane>
          <TabPane key="2" tab="个人业绩">
            <achievement/>
          </TabPane>
          <TabPane key="3" tab="工作履历">
            <workrecord />
          </TabPane>
          <TabPane key="4" tab="个人信用">
            <behavior/>
          </TabPane>
          <TabPane key="5" tab="行为限制">
            <limit />
          </TabPane>
        </Tabs>
      </div>

    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, provide, ref } from "vue";
import { useRoute } from "vue-router";
import { DetailAnchor } from "/@/components/anchorComponent/index";
import { parseTime } from '/@/utils';
import {
  certificate,
  achievement,
  workrecord,
  limit,
  behavior,
  punish,
} from "./src/index";
import { Breadcrumb, Tabs } from "ant-design-vue";
import {
  getStaffBaseInfoApi,
  getStaffCountfoApi,
  staffBaseModel,
  staffCountModel,
} from "/@/api/staff";

export default defineComponent({
  components: {
    certificate,
    achievement,
    workrecord,
    limit,
    behavior,
    DetailAnchor,
    punish,
    Breadcrumb,
    BreadcrumbItem: Breadcrumb.Item,
    BreadSeparator: Breadcrumb.Separator,
    Tabs,
    TabPane: Tabs.TabPane,
  },
  name: "Details",
  setup() {
    const { params } = useRoute();
    const personId: string = params.id as string;
    provide("personId", personId);
    const detail = ref<staffBaseModel | null>(null);
    const count = ref<staffCountModel | null>(null);
    const init = async () => {
      detail.value = await getStaffBaseInfoApi(personId);
      count.value = await getStaffCountfoApi(personId);
    };
    onMounted(init);
    return {
      activeKey: ref("1"),
      detail,
      count,
      parseTime
    };
  },
  methods: {
    sliceEl: function (val) {
      if (val) {
        return val.slice(0, 1);
      }
    },
  },
});
</script>

<style lang="less" scoped>
.staff-detail {
  background: #f4f6fa;

  .staff-detail__warp {
    width: @main-width;
    margin: 0 auto;

    .staff-detail__header {
      position: relative;
      padding: 30px 30px 25px;
      margin: 0 auto 16px;
      background: @white;
      border: 1px solid #edeff2;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);

      .staff-name-content {
        display: flex;
        align-content: center;

        & > span {
          display: block;
          width: 64px;
          height: 64px;
          margin: 0 24px 0 0;
          font-size: 32px;
          font-weight: 100;
          line-height: 60px;
          color: white;
          text-align: center;
          background: #46bbfe;
          border-radius: 50%;
        }

        .staff-type {
          display: flex;
          align-items: center;
          margin: 0 0 5px 0;

          h3 {
            margin-bottom: 0;
            font-size: 24px;
          }

         & ~ p {
            margin-bottom: 20px;
            font-size: 16px;
            font-weight: bold;
            color: #1a1f33;
          }
        }
      }

      .certificate {
        display: flex;
        margin: 0 0 0 15px;
        justify-content: start;

        li {
          padding: 4px 10px;
          margin: 0 8px 0 0;
          line-height: 20px;
          text-align: center;

          &:nth-child(1) {
            color: #216de5;
            background: rgba(33, 109, 229, 0.1);
          }

          &:nth-child(2) {
            color: rgba(255, 111, 39, 1);
            background: rgba(255, 111, 39, 0.1);
          }

          &:nth-child(3) {
            color: rgba(255, 3, 3, 1);
            background: rgba(255, 3, 3, 0.1);
          }

          &:nth-child(4) {
            color: rgba(14, 200, 20, 1);
            background: rgba(14, 200, 20, 0.1);
          }

          &:nth-child(5) {
            color: rgba(0, 191, 213, 1);
            background: rgba(0, 191, 213, 0.1);
          }

          &:nth-child(6) {
            color: rgba(78, 33, 229, 1);
            background: rgba(78, 33, 229, 0.1);
          }
        }
      }
    }
  }

  .staff-box{
    width: 820px;
    height: 88px;
  }

  .staff-info {
    display: flex;
    padding: 16px 20px;
    flex-wrap: wrap;
    background: #f7f8fa;

    p {
      width: 335px;
      padding-right: 20px;
      margin: 4px 0;
      line-height: 22px;

      > span {
        margin-right: 8px;
        line-height: 20px;
        color: #777;
      }

      &:nth-child(2n) {
        width: calc(100% - 335px);
      }
    }
  }

  .staff-detail__content{
    background: #fff;
  }

  .staff-tab__content {
    padding: 20px 20px 1px;
    background: @white;
  }
}

::v-deep(.ant-tabs-card) {
  margin-bottom: 40px;

  .ant-tabs-bar {
    margin: 0;
  }

  .ant-tabs-nav-container {
    height: 58px !important;
    background: #f5f5f6;
    border: 1px solid #e8eaee;

    .ant-tabs-tab {
      height: auto !important;
      padding: 18px 40px !important;
      margin: 0 !important;
      font-size: 16px;
      line-height: 22px !important;
      background: #f5f5f6 !important;
      border: 0 !important;



      &.ant-tabs-tab-active {
        color: @blue;
        background: @white !important;
      }
    }
  }

  .ant-tabs-tabpane-active{
    padding-bottom: 30px !important;
  }
}
</style>
